<template>
	<view class="top-search-container">
		<!-- 扫一扫 -->
		<view class="scan" @click="handleScanClick">
			<image src="/static/images/扫一扫.png" class="scan-img" 
				:class="{ 
					'scan-active': isScanning,
					'scan-scale': isScaling 
				}">
			</image>
		</view>
		<!-- 搜索框 -->
		<view class="search">
			<input type="text" class="search-input" value="" placeholder="请输入搜索内容" v-model="searchText" @click="toSearch(searchText)"/>
		</view>
		<!-- 照相机 -->
		<view class="camera">
			<image src="/static/images/照相机.png" class="camera-img"
				:class="{
					'camera-active': isScanning,
					'camera-scale': isScaling 
				}">
			</image>
		</view>
		<!-- 搜索按钮 -->
		<view class="search-btn">
			<button @click="toSearch(searchText)">搜索</button>
		</view>
	</view>
</template>

<script>
	export default {
		name:"content-top-bar",
		data() {
			return {
				searchText: '',
				isScanning: false,
				isScaling: false,
				scanTimer: null,
			};
		},
		methods: {
			async toSearch(searchText) {
				uni.navigateTo({
					url: '/pagesA/search/search?text=' + this.searchText
				})
			},
			async startScanAnimation() {
				this.isScanning = true;
				setTimeout(() => {
					this.isScanning = false;
				}, 200);
			},
			async handleScanClick() {
				this.isScaling = true;
				setTimeout(() => {
					this.isScaling = false;
				}, 200);
			},
			async startScanTimer() {
				// 每2秒触发一次动画
				this.scanTimer = setInterval(() => {
					this.startScanAnimation();
				}, 2000);
			},
			async clearScanTimer() {
				if (this.scanTimer) {
					clearInterval(this.scanTimer);
					this.scanTimer = null;
				}
			}
		},
		created() {
			this.startScanTimer();
		},
		destroyed() {
			this.clearScanTimer();
		}
	}
</script>

<style>
	.top-search-container {
		display: flex;
		width: 95%;
		height: 85rpx;
		margin: 20rpx;
		border-radius: 20rpx;
		border: 1px solid orangered;
	}
	
	.scan {
		width: 12.5%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	
	.scan::after {
		content: '';
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 2px;
		height: 50rpx;
		background-color: #b4adad;
	}
	
	.scan-img {
		width: 60rpx;
		height: 60rpx;
		transition: transform 0.2s ease;
		transform-origin: center center;
	}
	
	.scan-active {
		animation: shake 0.2s ease-in-out;
		transform-origin: center center;
		will-change: transform;
	}
	
	.scan-scale {
		transform: scale(0.8);
	}
	
	/* 关键帧动画 */
	@keyframes shake {
		0% {
			transform: rotate(0deg);
		}
		25% {
			transform: rotate(-10deg);
		}
		50% {
			transform: rotate(10deg);
		}
		75% {
			transform: rotate(-10deg);
		}
		100% {
			transform: rotate(0deg);
		}
	}
	
	.search {
		display: flex;
		justify-content: left;
		align-items: center;
		width: 45%;
		margin-left: 20rpx;
		margin-right: 20rpx;
		min-width: 200rpx; /* 添加最小宽度 */
		height: 100%; /* 确保高度填满父容器 */
	}
	
	.search-input {
		width: 100%;
		height: 60rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		border: none;
		background: transparent;
		box-sizing: border-box;
	}
	
	.camera {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 15%;
	}
	
	.camera-img {
		width: 60rpx;
		height: 60rpx;
		transition: transform 0.2s ease;
		transform-origin: center center;
	}
	
	.camera-active {
		animation: camera 0.5s ease-in-out;
		transform-origin: center center;
		will-change: transform;
	}
	
	@keyframes camera {
		0% {
			transform: rotate(0deg);
		}
		25% {
			transform: rotate(15deg);
		}
		50% {
			transform: rotate(-45deg);
		}
		75% {
			transform: rotate(30deg);
		}
	}
	
	.camera-scale {
		transform: scale(0.8);
	}
	
	.search-btn {
		border-radius: 30rpx;
		margin-left: 20rpx;	
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 15rpx;
		transform: translateZ(0);
		backface-visibility: hidden;
		perspective: 1000;
	}
	
	.search-btn button{
		width: 135rpx;
		height: 70rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		background-color: orangered;
		transform: translateZ(0);
		backface-visibility: hidden;
		perspective: 1000;
	}
</style>